<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <%@include file="/WEB-INF/includes/css-file.jsp" %>
    <link rel="stylesheet" href="${ctp}/static/css/main.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        table tbody td:nth-child(even) {
            color: #C00;
        }
    </style>
</head>

<body>
<%
    // 设置导航条上的显示
    pageContext.setAttribute("navInfo", "用户维护");
    // 设置点击高亮效果
    pageContext.setAttribute("curUrl", "permission/user/list");
%>
<%@include file="/WEB-INF/includes/navbar.jsp" %>

<div class="container-fluid">
    <div class="row">
        <%@include file="/WEB-INF/includes/sidebar_menu.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;"
                          action="${ctp}/permission/user/list" method="post">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input class="form-control has-success" type="text"
                                       placeholder="用户帐号/用户名/邮箱查询" name="searchParam" value="${searchParam}">
                                <%-- 回显searcherParam，也可以从param中取 --%>
                                <%--placeholder="用户帐号/用户名/邮箱查询" name="searchParam" value="${param.searchParam}">--%>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询
                        </button>
                    </form>
                    <button type="button" class="btn btn-danger deleteAllBtn" style="float:right;margin-left:10px;">
                        <i class=" glyphicon glyphicon-remove"></i> 删除
                    </button>
                    <button type="button" class="btn btn-primary" style="float:right;"
                            onclick="window.location.href='${ctp}/manager/toAdd'"><i
                            class="glyphicon glyphicon-plus"></i> 新增
                    </button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th width="30">#</th>
                                <th width="30"><input type="checkbox" id="checkAll"></th>
                                <th>账号</th>
                                <th>名称</th>
                                <th>邮箱地址</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:if test="${empty userPage.list}">
                                <tr>
                                    <td colspan="6" align="center">抱歉！没有查询到您要的数据！</td>
                                </tr>
                            </c:if>
                            <c:if test="${!empty userPage.list}">
                                <c:forEach items="${userPage.list}" var="user" varStatus="status">
                                    <tr>
                                            <%-- 数据库中的用户id --%>
                                        <td>${user.id}</td>
                                            <%-- 迭代元素的序号 --%>
                                            <%--<td>${status.count}</td>--%>
                                            <%-- 迭代元素的索引，从0开始   --%>
                                            <%--<td>${status.index}</td>--%>
                                        <td><input type="checkbox" class="check" delete_id="${user.id}"></td>
                                        <td>${user.loginacct}</td>
                                        <td>${user.username}</td>
                                        <td>${user.email}</td>
                                        <td>
                                            <button user_id="${user.id}" type="button"
                                                    class="btn btn-success btn-xs assignBtn">
                                                <i class=" glyphicon glyphicon-check"></i></button>
                                            <button type="button" class="btn btn-primary btn-xs"
                                                    onclick="window.location.href='${ctp}/permission/user/toUpdate?userId=${user.id}&pageNum=${userPage.pageNum}'">
                                                <i class=" glyphicon glyphicon-pencil"></i></button>
                                            <button user_id="${user.id}" type="button"
                                                    class="btn btn-danger btn-xs deleteBtn">
                                                <i class=" glyphicon glyphicon-remove"></i></button>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </c:if>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" align="center">
                                    <ul class="pagination">
                                        <%-- 即使点击分页链接也应该带上查询查询条件的值 --%>
                                        <c:if test="${userPage.isFirstPage}">
                                            <li class="disabled"><a href="${ctp}/permission/user/list?pageNum=1">首页</a>
                                            </li>
                                        </c:if>
                                        <c:if test="${!userPage.isFirstPage}">
                                            <li><a href="${ctp}/permission/user/list?pageNum=1">首页</a></li>
                                        </c:if>
                                        <c:if test="${userPage.hasPreviousPage}">
                                            <li>
                                                <a href="${ctp}/permission/user/list?pageNum=${userPage.prePage}">上一页</a>
                                            </li>
                                        </c:if>
                                        <c:forEach items="${userPage.navigatepageNums}" var="pageNum">
                                            <c:if test="${pageNum == userPage.pageNum}">
                                                <li class="active">
                                                    <a href="${ctp}/permission/user/list?pageNum=${pageNum}">${pageNum}
                                                        <span class="sr-only">(current)</span>
                                                    </a>
                                                </li>
                                            </c:if>
                                            <c:if test="${pageNum != userPage.pageNum}">
                                                <li>
                                                    <a href="${ctp}/permission/user/list?pageNum=${pageNum}">${pageNum}</a>
                                                </li>
                                            </c:if>
                                        </c:forEach>
                                        <c:if test="${userPage.hasNextPage}">
                                            <li>
                                                <a href="${ctp}/permission/user/list?pageNum=${userPage.nextPage}">下一页</a>
                                            </li>
                                        </c:if>
                                        <c:if test="${userPage.isLastPage}">
                                            <li class="disabled"><a
                                                    href="${ctp}/permission/user/list?pageNum=${userPage.pages}">末页</a>
                                            </li>
                                        </c:if>
                                        <c:if test="${!userPage.isLastPage}">
                                            <li><a href="${ctp}/permission/user/list?pageNum=${userPage.pages}">末页</a>
                                            </li>
                                        </c:if>
                                    </ul>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%@include file="/WEB-INF/includes/js-file.jsp" %>
<%@include file="/WEB-INF/includes/common-js.jsp" %>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
    });
    // 给所有分页超链接绑定单击事件，让其动态的带上分页的查询参数
    $(".pagination").find("a").click(function () {
        // 获取到查询表单的查询参数
        var param = $("input[name='searchParam']").val();
        // 为超链接动态拼装查询条件
        var href = $(this).attr("href") + "&searchParam=" + param;
        $(this).attr("href", href);
        // 不禁用默认行为，而是为超链接多拼装上查询条件
    })
    checkAll_reverse($("#checkAll"), $(".check"));
    $(".deleteAllBtn").click(function () {
        if ($(".check:checked").length == 0) {
            layer.msg("请选择要删除的用户！");
            return false;
        }
        // 点击删除按钮，拿到要删除的所有员工id
        var delUrl = "${ctp}/permission/user/del?pageNum=${userPage.pageNum}&ids=";
        var ids = "";
        $(".check:checked").each(function () {
            // 取出我们自定义的id属性
            ids += $(this).attr("delete_id") + ",";
        })

        // 方法二：通过数组来完成拼字符串
        var ids2 = "";
        var array = new Array();
        $.each($(".check:checked"), function (index, element) {
            var id = $(element).attr("delete_id");
            array.push(id);
        })
        ids2 = array.join(",");
        console.log(ids2);

        // 需要去掉最后一个逗号
        delUrl += ids.substring(0, ids.length - 1);
        if (confirm("确认删除[" + ids + "]这些员工吗？")) {
            // 让浏览器访问这个删除链接
            window.location.href = delUrl;
        }
        return false;
    })
    // 点击权限分配按钮来到权限分配页面
    $(".assignBtn").click(function () {
        // 拿到用户id带给后台
        var userId = $(this).attr("user_id");
        // 去权限分配页面
        window.location.href = "${ctp}/permission/user/listUserRoles?userId=" + userId;
    })

    $(".deleteBtn").click(function () {
        var userId = $(this).attr("user_id");
        // 使用layer确认框
        layer.confirm("您是否确定删除该条数据？", {btn: ['确定', '取消']}, function (index) {
            window.location.href = "${ctp}/permission/user/del?pageNum=${userPage.pageNum}&ids=" + userId;
            layer.close(index);
        }, function (index) {
            layer.close(index);
        });
        <%--window.location.href="${ctp}/permission/user/del?ids=" + ${user.id}&pageNum=${userPage.pageNum}';--%>
    })
</script>
</body>
</html>
